<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>捕获冒泡</title>
		<style type="text/css">
			#div1{
				height: 300px;
				width: 300px;
				background: #f00;
			}
			#div2{
				height: 150px;
				width: 150px;
				background: #0f0;
				position: relative;
				top: 400px;
			}
		</style>
	</head>
	<body>
		<div id="div1">
		    <div id="div2"></div>
		 </div>
	</body>
	<script type="text/javascript">

		var div1 = document.getElementById("div1");
		var div2 = document.getElementById("div2");
		div1.onclick = function(e){
			var e = e||window.event;
			div2.style.background ='pink'
			console.log('111111111')
			stopBubble(e)
		};//父亲

		document.onclick = function(){
			div2.style.background = 'yellow'
		}
   		

   		function stopBubble(e){
   			if(e && e.stopPropagation){
   				e.stopPropagation()
   			}else{
   				window.event.cancelBubble = true;
   			}
   		}
	</script>
</html>
